import React, {Component} from 'react';
import {StyleSheet, View,} from 'react-native';
import PropTypes from 'prop-types';


export default class DashLine extends Component {
    static propTypes = {
        lineWidth: PropTypes.number,
        backgroundColor: PropTypes.string,
        color: PropTypes.string,
        style: PropTypes.Object,
    }

    static defaultProps = {
        lineWidth:1,
        color:'red',
        backgroundColor:'red',
    }

    render() {
        return <View style={[styles.wrapperStyle,{height:this.props.lineWidth}, this.props.style]}>
            <View style={{...styles.lineStyle,borderWidth: this.props.lineWidth,borderColor: this.props.borderColor,}} />
            {Platform.OS === 'android' ? <View style={{...styles.lineMask,marginTop: -this.props.lineWidth,
                height: this.props.lineWidth,
                backgroundColor: this.props.backgroundColor}} /> : null}
        </View>
    }
}
const styles = StyleSheet.create({
    wrapperStyle : {
        height: 1,
        overflow: 'hidden'
    },
    lineStyle : {
        height: 0,
        borderColor: 'red',
        borderWidth: 1,
        borderStyle: 'dashed'
    },
    lineMask :{
        marginTop: -1,
        height: 1,
        backgroundColor: 'red'
    }
})
